<template>
    <div class="h5-ex-page h5-ex-bg" >
        <img src="https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_1.jpg" alt="">
        <div v-for="item in list" v-bind:key="item.id">
            <img v-lazy="item.src" >
        </div>
        <div class="h5-ex-mask"></div>

        <div class="app-download-btn" @click="download">
            <img src="https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_6.jpg" alt="">
        </div>
    </div>
</template>

<script>

import Vue from 'vue';
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);

export default {
    data(){
        return{
            list:[
                {
                    src:'https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_2.jpg',
                },
                {
                    src:'https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_3.jpg',
                },
                {
                    src:'https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_4.jpg',
                },
                {
                    src:'https://youdupingtai.oss-cn-shanghai.aliyuncs.com/h5-assets/app_d_pic_5.jpg',
                }
               
            ]
        }
    },
    methods:{
        download:function(){
            window.location.href=this.$conf.download_href;
        }
    }
}
</script>

<style lang='scss'>
    .h5-ex-page{
        position: relative;
        padding-bottom: 1rem;
        .title{
            text-align: center;
            font-size: .16rem;
            padding: 1.5em 0 1em 0;
        }
        image[lazy=loading] {
            width: 40px;
            height: 300px;
            margin: auto;
        }
        .h5-ex-mask{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        img{
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }
        .app-download-btn{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            background-color: #245ce3;
        }
    }
    .h5-ex-bg{
        min-height: 800px;
        background-color: #245ce3;
    }
</style>